<?php

namespace JsonLowCode\Form\Fields;

use JsonLowCode\UI\ColorPicker;
use JsonLowCode\Form\Abstract\FieldAbstract;
use JsonLowCode\Form\Traits\HasDisabled;
use JsonLowCode\Form\Traits\HasSize;
use JsonLowCode\UI\Input;
use JsonLowCode\UI\InputGroupLabel;
use JsonLowCode\UI\Space;
use JsonLowCode\UI\InputGroup;

/**
 * @property ColorPicker $element
 */
class ColorPickerField extends FieldAbstract
{

    use HasDisabled, HasSize;

    protected Input $input;
    protected ColorPicker $colorElement;

    protected array $swatches = [
        "black","gray","white","pink","#7700FF","magenta","red","#8C0044",
        "lime","green","dodgerblue","blue","purple","yellow","gold","orange"
    ];

    protected function booting(): void
    {
        $this->colorElement = new ColorPicker;
        $this->element = new Space();
        $this->element->vertical();
        $this->input = new Input();
        $this->input->bindModel("value",$this->bindField);
        $this->colorElement->bind("v-model:value",$this->bindField);
        $this->colorElement->styles(["width"=>"250px"]);
        $this->input->styles(["width"=>"250px"]);
        $this->element->children($this->colorElement);
        $this->element->children($this->input);

        $this->swatches($this->swatches);
    }

    /**
     * 色板的值
     * @param string|array $swatches
     * @return $this
     */
    public function swatches(string|array $swatches = []): static
    {
        $this->element->swatches($swatches);
        return $this;
    }


    /**
     * hex 模式 例如 #FFFFFFFF
     * @return $this
     */
    public function hex(): static
    {
        $this->element->modes(['hex']);
        return $this;
    }

    /**
     * rgba 模式 rgba(255,255,255,1)
     * @return $this
     */
    public function rgb(): static
    {
        $this->element->modes();
        return $this;
    }

    /**
     * hsla 模式 hsla(0, 75%, 78%, 1)
     * @return $this
     */
    public function hsl(): static
    {
        $this->element->modes(['hsl']);
        return $this;
    }

    /**
     * hsva 模式 hsva(0, 75%, 78%, 1)
     * @return $this
     */
    public function hsv(): static
    {
        $this->element->modes(['hsv']);
        return $this;
    }
}
